<template>
    <div class="formdelist formdelist_a">
        <a-form-model layout="vertical" :model="config">
            <a-form-model-item :label="i18n('list.selection','选择表单')">
                <rx-input-button v-model="config.form" :allowInput="true" @click="selectForm" @change="changeButton" @input="handInput"></rx-input-button>
                <a-checkbox class="formChenckbox" v-model="config.showName">{{i18n('form.titleDisplay','标题展示')}}</a-checkbox>
                <a-checkbox class="formChenckbox" v-model="config.fullBtn">{{customViewI18n('fullBtn','全屏按钮')}}</a-checkbox>
            </a-form-model-item>
            <a-form-model-item label="类型选择">
                <a-select
                    @change="changeSelection"
                    v-model="config.typeSelection"
                    :options="typeSelection"
                    :getPopupContainer="(p) => p.parentNode"
                    allowClear
                >
                </a-select>
            </a-form-model-item>
            <!--参数回填-->
            <template v-if="config.typeSelection=='backfill'">
                <a-form-model-item :label="$comi18('formDef.queryParamSource', '查询参数来源')">
                    <a-select
                        v-model="config.backfill.type"
                        :options="sourceAry"
                        :getPopupContainer="(p) => p.parentNode"
                        allowClear
                    >
                    </a-select>
                </a-form-model-item>
                <a-form-model-item :label="$comi18('formDef.deployeEvent', '发布事件组件')" v-if="config.backfill.type == 'event'">
                    <a-select
                        v-model="config.backfill.publishComponent"
                        :options="publishComponent"
                        @change="changeBackfill"
                        :getPopupContainer="(p) => p.parentNode"
                    >
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="回填列表">
                    <a-button size="small" @click="addBackfill" style="margin-right: 10px">添加</a-button>
                    <a-button size="small" type="danger" @click="deleteBackfill">删除</a-button>
                    <a-table
                        style="margin-top: 10px"
                        :dataSource="config.backfill.mapping"
                        :rowSelection="receiveRowSelection"
                        :pagination="false"
                        rowKey="idx_"
                        :bordered="true"

                    >
                        <a-table-column :title="$comi18('rxDialog.paramName', '参数名称')" dataIndex="fieldName">
                            <template slot-scope="text, record">
                                <a-select
                                    v-model="record.fieldName"
                                    :options="boAttrs"
                                    :allowClear="true"
                                    :getPopupContainer="(p) => p.parentNode"

                                >
                                </a-select>
                            </template>
                        </a-table-column>
                        <a-table-column :title="$comi18('formDef.valueSource', '值来源')" dataIndex="valueSource">
                            <template slot-scope="text, record">
                                <a-select
                                    v-model="record.valueSource"
                                    :options="valueSourceDef"
                                    :allowClear="true"
                                    :getPopupContainer="(p) => p.parentNode"
                                >
                                </a-select>
                            </template>
                        </a-table-column>
                        <a-table-column :title="$comi18('rxDialog.dbObj.paramVal', '参数值')" dataIndex="valueDef">
                            <template slot-scope="text, record">
                                <a-select
                                    v-model="record.valueDef"
                                    :options="publishParams"
                                    :allowClear="true"
                                    :getPopupContainer="(p) => p.parentNode"
                                    v-if="config.backfill.type == 'event' && record.valueSource == 'param'"
                                >
                                </a-select>
                                <a-select
                                    v-if="config.backfill.type == 'url' && record.valueSource == 'param'"
                                    v-model="record.valueDef"
                                    :options="params"
                                    :allowClear="true"
                                    :getPopupContainer="(p) => p.parentNode"
                                >
                                </a-select>
                                <a-input v-model="record.valueDef" v-if="record.valueSource == 'fixedVar'"></a-input>
                                <a-input-group v-if="record.valueSource == 'script'" compact>
                                    <div style="display: flex">
                                        <a-input style="flex:1;margin-right: 0px" v-model="record.valueDef"/>
                                        <a-button @click="openScriptQuery(record)">...</a-button>
                                    </div>
                                </a-input-group>
                                <a-select
                                    v-if="record.valueSource == 'constantVar'"
                                    v-model="record.valueDef"
                                    :options="constantField"
                                    allowClear
                                    :getPopupContainer="(p) => p.parentNode"
                                ></a-select>
                            </template>
                        </a-table-column>
                    </a-table>
                </a-form-model-item>
            </template>
            <!--参数查询-->
            <template v-else>
                <a-form-model-item :label="$comi18('formDef.queryParamSource', '查询参数来源')">
                    <a-select
                        v-model="config.receive.type"
                        :options="sourceAry"
                        :getPopupContainer="(p) => p.parentNode"
                        allowClear
                    >
                    </a-select>
                </a-form-model-item>
                <a-form-model-item :label="$comi18('formDef.isUerId', '是否使用主键')">
                    <a-radio-group v-model="config.receive.isPk">
                        <a-radio value="YES">{{$comi18('formDef.yes', '是')}}</a-radio>
                        <a-radio value="NO">{{$comi18('formDef.no', '否')}}</a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item :label="$comi18('formDef.isReadOnly', '是否只读')">
                    <a-radio-group v-model="config.receive.isRead">
                        <a-radio value="YES">{{$comi18('formDef.yes', '是')}}</a-radio>
                        <a-radio value="NO">{{$comi18('formDef.no', '否')}}</a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item :label="i18n('form.promState','提示语句')">
                    <a-input class="formInput-df" v-model="config.tips"></a-input>
                </a-form-model-item>

                <a-form-model-item :label="$comi18('formDef.deployeEvent', '发布事件组件')" v-if="config.receive.type == 'event'">
                    <a-select
                        v-model="config.receive.publishComponent"
                        :options="publishComponent"
                        @change="changeComponent"
                        :getPopupContainer="(p) => p.parentNode"
                    >
                    </a-select>
                </a-form-model-item>

                <a-form-model-item :label="$comi18('formDef.primaryKey', '主键参数映射')" v-if="config.receive.isPk == 'YES'">
                    <a-table
                        :dataSource="config.receive.pkMapping"
                        :pagination="false"
                        :rowSelection="receiveRowSelection"
                        rowKey="idx_"
                        :bordered="true"

                    >
                        <a-table-column :title="$comi18('rxDialog.paramName', '参数名称')" dataIndex="name">
                            <template slot-scope="text, record">
                                {{ text }}
                            </template>
                        </a-table-column>
                        <a-table-column :title="$comi18('formDef.valueSource', '值来源')" dataIndex="valueSource">
                            <template slot-scope="text, record">
                                <a-select
                                    v-model="record.valueSource"
                                    :options="valueSourceDef"
                                    :allowClear="true"
                                    :getPopupContainer="(p) => p.parentNode"
                                >
                                </a-select>
                            </template>
                        </a-table-column>
                        <a-table-column :title="$comi18('rxDialog.dbObj.paramVal', '参数值')" dataIndex="valueDef">
                            <template slot-scope="text, record">
                                <a-select
                                    v-model="record.valueDef"
                                    :options="publishParams"
                                    :allowClear="true"
                                    :getPopupContainer="(p) => p.parentNode"
                                    v-if="config.receive.type == 'event' && record.valueSource == 'param'"
                                >
                                </a-select>
                                <a-select
                                    v-model="record.valueDef"
                                    :options="params"
                                    :allowClear="true"
                                    :getPopupContainer="(p) => p.parentNode"
                                    v-if="config.receive.type == 'url' && record.valueSource == 'param'"
                                >
                                </a-select>
                                <a-input v-model="record.valueDef" v-if="record.valueSource == 'fixedVar'"></a-input>
                                <a-input-group v-if="record.valueSource == 'script'" compact>
                                    <div style="display: flex">
                                        <a-input style="flex:1;margin-right: 0px" v-model="record.valueDef"/>
                                        <a-button @click="openScriptQuery(record)">...</a-button>
                                    </div>
                                </a-input-group>
                                <a-select
                                    v-if="record.valueSource == 'constantVar'"
                                    v-model="record.valueDef"
                                    :options="constantField"
                                    allowClear
                                    :getPopupContainer="(p) => p.parentNode"
                                ></a-select>
                            </template>
                        </a-table-column>
                    </a-table>
                </a-form-model-item>

                <a-form-model-item :label="$comi18('formDef.valueSource', '无主键参数映射')" v-else>
                    <a-table
                        :dataSource="config.receive.mapping"
                        :pagination="false"
                        :rowSelection="receiveRowSelection"
                        rowKey="idx_"
                        :bordered="true"

                    >
                        <a-table-column :title="$comi18('rxDialog.paramName', '参数名称')" dataIndex="name">
                            <template slot-scope="text, record">
                                {{ text }}
                            </template>
                        </a-table-column>
                        <a-table-column :title="$comi18('formDef.valueSource', '值来源')" dataIndex="valueSource">
                            <template slot-scope="text, record">
                                <a-select
                                    v-model="record.valueSource"
                                    :options="valueSourceDef"
                                    :allowClear="true"
                                    :getPopupContainer="(p) => p.parentNode"
                                >
                                </a-select>
                            </template>
                        </a-table-column>
                        <a-table-column :title="$comi18('rxDialog.dbObj.paramVal', '参数值')" dataIndex="valueDef">
                            <template slot-scope="text, record">
                                <a-select
                                    v-model="record.valueDef"
                                    :options="publishParams"
                                    :allowClear="true"
                                    :getPopupContainer="(p) => p.parentNode"
                                    v-if="config.receive.type == 'event' && record.valueSource == 'param'"
                                >
                                </a-select>
                                <a-select
                                    v-else-if="record.valueSource == 'param'"
                                    v-model="record.valueDef"
                                    :options="params"
                                    :allowClear="true"
                                    :getPopupContainer="(p) => p.parentNode"
                                >
                                </a-select>
                                <a-input v-model="record.valueDef" v-if="record.valueSource == 'fixedVar'"></a-input>
                                <a-input-group v-if="record.valueSource == 'script'" compact>
                                    <div style="display: flex">
                                        <a-input style="flex:1;margin-right: 0px" v-model="record.valueDef"/>
                                        <a-button @click="openScriptQuery(record)">...</a-button>
                                    </div>
                                </a-input-group>
                                <a-select
                                    v-if="record.valueSource == 'constantVar'"
                                    v-model="record.valueDef"
                                    :options="constantField"
                                    allowClear
                                    :getPopupContainer="(p) => p.parentNode"
                                ></a-select>
                            </template>
                        </a-table-column>
                    </a-table>
                </a-form-model-item>
            </template>
        </a-form-model>
    </div>
</template>

<script>
import {RxInputButton, Util, Dialog, GridMixin} from "@lowcode/jpaas-common-lib"
import DialogBox from '@/assets/js/DialogBox.js'
import ComponentDef from './ComponentDef'
import FormCustomQueryApi from '@/api/form/core/formCustomQuery'
import FormBoAttrApi from "@/api/form/bo/formBoAttr";

export default {
    name: 'form-def',
    mixins: [GridMixin, ComponentDef],

    components: {
        RxInputButton,
    },
    data() {
        return {
            labelCol: {span: 6},
            wrapperCol: {span: 18},
            config: {
                form: "{value:'',text:''}",
                component: 'form-component',
                alias: '',
                name: '',
                showName: true,
                fullBtn: false,
                receive: {
                    //url,event
                    type: this.portalLayout?'':'url',
                    isData: 'NO',
                    isPk: 'YES',
                    isRead: 'NO',
                    component: '',
                    mapping: [],
                    pkMapping: [{idx_: Util.randomId(), name: 'pk', valueSource: 'param', valueDef: ''}],
                },
                tips:this.i18n('msg.passInParam','请先传入主键参数'),
                backfill:{
                    type:'',
                    mapping:[]
                },
                formId:'',//表单id
            },
            sourceAry: [
                {value: 'url', label: this.i18n('form.incomParam','来自传入参数')},
                {value: 'event', label: this.$comi18('formDef.fromComponent', '来自组件')},
            ],
            publishComponent: [],
            publishParams: [],
            selectedRowKeys: [],
            valueSourceDef: [
                {value: 'param', label: this.$ti18('rxForm.param', '参数传入')},
                {value: 'fixedVar', label: this.$ti18('rxForm.fixedVar','固定值')},
                {value: 'script', label: this.$ti18('rxForm.script','脚本')},
                {value: 'constantVar', label: this.$ti18('rxForm.constantVar','常量')},
            ],
            constantField: [],
            alrt: 'vertical',
            typeSelection:[
                {value:'introduced', label:'传入'},
                {value:'backfill', label:'回填'},
            ],
            boAttrs:[],//表单的字段
            backfillRowSelection:[

            ]
        }
    },
    created() {
        this.init();
    },
    computed: {
        receiveRowSelection() {
            return {
                selectedRowKeys: this.selectedRowKeys,
                onChange: this.onSelectChange,
            }
        },
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formComponent", key);
        },
        openScriptQuery(record) {
            Dialog.openScripttextDialog(
                {
                    curVm: this,
                    widthHeight: ['800px', '600px'],
                    zIndex:9999,
                    data: {script: record.valueDef},
                },
                function (self, data) {
                    record.valueDef = data
                }
            )
        },
        init() {
            if (this.conf.receive) {
                this.config = this.conf;
                this.changeComponent(this.config.receive.publishComponent)
                if(this.config.formId){
                    //获取表单的字段
                    this.getByFormId(this.config.formId)
                }
            }
            if(this.config.backfill){
                this.changeBackfill(this.config.backfill.publishComponent)
            }
            if(this.config.receive.publishComponent){
                this.publishParams = this.getPubParams(this.config.receive.publishComponent)
            }
            if(!this.config.backfill){
                this.config.backfill = {
                    type:'',
                    mapping:[]
                }
            }
            if(!this.config.typeSelection){
                this.config.typeSelection = 'introduced'
            }
            this.publishComponent = this.getPublishOptions()
        },
        cancel() {
            Util.closeWindow(this, 'cancel')
        },
        selectForm(vm) {
            var self_ = this
            var config = {curVm: this, widthHeight: ['1100px', '680px'], zIndex: 999999, data: {multiSelect: false}}
            DialogBox.openSoution(config, function (data) {
                if (!data) {
                    self_.$notification.warning({message: self_.$ti18('rxMsa.tipsInfo','提示信息'), description: '请选择一个表单!'})
                    return
                }
                var isExist = self_.isAliasExist(data.alias)
                if (isExist) {
                    return
                }
                self_.getByFormId(data.formId)
                self_.handPublishConf(data.noPkSetting)
                self_.config.form = `{text:'${data.name}',value:'${data.alias}'}`
                self_.config.alias = data.alias
                self_.config.name = data.name;
                self_.config.formId = data.formId;
                if (self_.type != 'drag') {
                    self_.$emit('formSubmit', self_.config, self_.index, self_.type, self_.item)
                } else {
                    self_.$emit('dragclick', self_.config, self_.index, self_.type)
                }
            })
        },
        getByFormId(formId){
            FormBoAttrApi.getByFormId(formId).then(res=>{
                var ary=[];
                for(var i=0;i<res.length;i++){
                    if(res[i].name!='CREATE_BY_'){
                        var o=res[i];
                        var newObj = {};
                        newObj.value = o.name;
                        newObj.fieldName = o.fieldName;
                        newObj.label = o.comment;
                        ary.push(newObj);
                    }
                }
                this.boAttrs=ary;
            })
        },
        handPublishConf(conf) {
            if (!conf) {
                return
            }
            conf = JSON.parse(conf)
            this.config.receive.mapping = conf.filter(item => {
                return item.valueSource == 'param';
            }).map((item) => {
                return {idx_: Util.randomId(), name: item.name, valueSource: item.valueSource, valueDef: item.valueDef}
            })
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys
        },
        handOk() {
            if (!this.config.alias) {
                this.$notification.warning({message: this.$ti18('rxMsa.tipsInfo','提示信息'), description: this.i18n('msg.selectForm','请先选择一个表单!')})
                return
            }
        },
        handInput(data) {
            if (!data) {
                this.config.alias = ''
                this.config.name = ''
            }
        },
        changeButton(val){
            this.config.name = eval("(" + val + ")").text
        },
        changeComponent(val) {

            if (this.config.alias == val) {
                this.config.receive.publishComponent = ''
                this.$notification.warning({message: this.$ti18('rxMsa.tipsInfo','提示信息'), description: this.$comi18('formDef.cannotSelectEvent', '发布事件组件不能选择自己!')})
                return
            }
            this.publishParams = this.getPubParams(val)
        },
        changeBackfill(val){
            if (this.config.alias == val) {
                this.config.backfill.publishComponent = ''
                this.$notification.warning({message: this.$ti18('rxMsa.tipsInfo','提示信息'), description: this.$comi18('formDef.cannotSelectEvent', '发布事件组件不能选择自己!')})
                return
            }
            this.publishParams = this.getPubParams(val)
        },
        addBackfill(){
            this.config.backfill.mapping.push({
                idx_:Util.randomId(),
                fieldName:'',
                valueSource:'',
                publishParams:'',
            })
        },
        deleteBackfill(){
            this.removeRows(this.config.backfill.mapping, this.selectedRowKeys)
        },
        changeSelection(){
            this.config.backfill = {
                type:'',
                mapping:[]
            };
            this.$forceUpdate()
        }
    },
}
</script>

<style scoped>
.formChenckbox {
    margin-top: 9px;
}

.formdelist {
    padding: 0 10px;
}

.ant-form-vertical .ant-form-item-label, .ant-col-24.ant-form-item-label, .ant-col-xl-24.ant-form-item-label {
    padding: 0 0 2px;
}
</style>